<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{margin:0;padding:0;}
	ul{list-style: none;}
	select{outline: none;}
	.box{width:800px;height: 400px;background: #eee;margin:50px auto;}
	h1{margin:0 auto;}
	#list{float:left;width:30%;height:80%;background: #666;}
	#list ul{width:100%;height: 100%;}
	#list ul li{width:100%;height:40px;line-height:40px;margin-bottom: 10px;text-indent: 10px;background: #ccc;font-size: 12px;}
	#list ul li:hover{opacity:0.8;}
	#play{position:relative; float:right;width:70%;height: 80%;background: #999;}
	#play #song{float:left;width:100px;height: 100px;border-radius: 50%;background: #E83C3C;margin: 50px;color:#666;}
	#play #song #last{float:left;width:20px;height: 20px;line-height: 20px;text-align: center; border-radius: 50%;background: yellow;margin: 40px 0 0 10px;font-weight: 600;font-size: 12px;color:#333;}
	#play #song #start{float:left;width:0;height: 0;border-left:25px solid white;border-top: 25px solid transparent;border-bottom: 25px solid transparent;margin-top: 27px ;margin-left: 9px;border-radius: 7px;}
	#play #song #last:hover{opacity:0.8;}
	#play #song #start:hover{opacity:0.8;}
	#play #song #next:hover{opacity:0.8;}
	#play #song #next{float:right;width:20px;height: 20px;line-height: 20px;text-align: center; border-radius: 50%;background: yellow;margin: 40px 10px 0 0;font-weight: 600;font-size: 12px;color:#333;}
	#play #time{float:right;width:80px;height: 20px;line-height: 20px; margin: 80px 20px;border-radius: 10px;text-align: center; background: white;}
	#play #songTime{position: absolute;top:120px;right:20px; width:370px;height: 10px;border-radius: 10px;overflow: hidden; background: white;}
	#play #playTime{background: yellow;height: 100%;width:0;border-radius: 10px;}
	#play #sel{position: absolute;top:150px;right:20px;width: 100px;height: 30px;border-radius: 2px;}
</style>
<body>
	<div class="box">
		<header>
			<h1>music</h1>
		</header>
		<div id="list">
			<ul id="ul">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
		<div id="play">
			<div id="song">
				<div id="last"><<</div>
				<div id="start"></div>
				<div id="next">>></div>
			</div>
			<div id="time"><span id="t1">0</span><span>/</span><span id="t2"></span></div>
			<div id="songTime">
				<div id="playTime"></div>
			</div>
			<audio id="audio" src="./audio/list/Family of the Year - Hero.mp3"></audio>
			<select name="" id="sel">
				<option value="0">顺序播放</option>
				<option value="1">列表循环</option>
				<option value="2">单曲循环</option>
				<option value="3">随机播放</option>
				<option value="3">双曲循环</option>
			</select>
			<!-- <audio src="" controls="" loop=""></audio> -->
		</div>
		
	</div>
	
</body>
<script>
	function initial(){
		var arr=['Chen - 최고의 행운','DAViCHi - 괜찮아 사랑이야','Family of the Year - Hero','Kae Sun - Ship And The Globe','Twin Forks - Cross My Mind','尹美莱 - 너를 사랑해'];
		var play=document.getElementById('play');
		var uls=document.getElementById('ul');
		var start=document.getElementById('start');
		var last=document.getElementById('last');
		var next=document.getElementById('next');
		var audio=document.getElementById('audio');
		var t1=document.getElementById('t1');
		var t2=document.getElementById('t2');
		var songTime=document.getElementById('songTime');
		var playTime=document.getElementById('playTime');
		var songLen=parseInt(getStyle(songTime,'width'));
		var sel=document.getElementById('sel');
		var duTime=audio.duration;
		var curTime;
		var clock;
		var num=0;


		function playMusic(){
			audio.src='./audio/list/'+arr[num]+'.mp3';
			audio.play();
			// console.log(duTime);
			t2.innerHTML=parseInt(duTime);
			clock=setInterval(playSong,1000);

			// if(!audio.ended){
			// 	num+=1;
			// 	if(num>=arr.length){
			// 		num=0;
			// 	}
			// 	playMusic();
			// }
			function playSong(){
				duTime=audio.duration;
				curTime=audio.currentTime;
				t1.innerHTML=parseInt(curTime);
				playTime.style.width=parseInt(curTime/duTime*songLen)+'px';
			}
		}

		start.addEventListener('click',start_click,false);    //点击播放
		function start_click(){
			// console.log(audio.paused);  //true/false
			if(audio.paused){
				playMusic();
				// console.log(audio.ended);
				
			}else{
				audio.pause();
				clearInterval(clock);
			}
		}

		last.addEventListener('click',last_click,false);    //上一曲
		function last_click(){
			num-=1;
			if(num<0){
				num=arr.length-1;
			}
			audio.src='./audio/list/'+arr[num]+'.mp3';
			audio.play();
		}

		next.addEventListener('click',next_click,false);    //下一曲
		function next_click(){
			num+=1;
			if(num==arr.length){
				num=0;
			}
			audio.src='./audio/list/'+arr[num]+'.mp3';
			audio.play();
		}

		songTime.addEventListener('click',songTime_click,false);  //自定义播放位置
		function songTime_click(e){
			var a=e.clientX;
			var b=songTime.offsetLeft;
			var c=play.offsetLeft;
			var d=a-(b+c);
			// console.log(a,b,c,d);
			playTime.style.width=d+'px';
			audio.currentTime=d/songLen*audio.duration;
		}

		console.log(uls.children);
		for(var i=0;i<uls.children.length;i++){
			uls.children[i].index=i;
			uls.children[i].innerHTML+=arr[i];
			uls.children[i].addEventListener('dblclick',lis_click,false);

			function lis_click(){
				num=this.index;
				audio.src='./audio/list/'+arr[num]+'.mp3';
				audio.play();
			}
		}
		

		// sel.addEventListener('change',sel_change,false);    //选择播放模式
		// function sel_change(){
		// 	console.log(sel.value);
		// 	switch(parseInt(sel.value)){
		// 		case 0:
		// 			playMusic(num);
		// 			break;
		// 		case 1:
		// 			audio.loop=true;
		// 			break;
		// 		case 2:
		// 			audio.loop=true;
		// 			break;
		// 		case 3:
		// 			audio.loop=true;
		// 			break;
		// 		case 4:
		// 			audio.loop=true;
		// 			break;
		// 	}
		// }

		

		function getStyle(obj,attr){
			var cs = obj.currentStyle || window.getComputedStyle(obj, null);
			return cs[attr];
		}
	}

	window.addEventListener('load',initial,false);
	
</script>
</html>